<template>
  <el-dialog
    maxHeight="null"
    width="990px"
    title="物料目录选择"
    :visible.sync="dialogFormVisible"
    custom-class="sorting-code-number"
    v-if="dialogTrueOrFalse"
  >
    <div class="el-dialog__body-header">
      <span class="title">物料目录树</span>
      <el-search
        :formProp="formData"
        :showIndex="0"
        width="380px"
        placement="bottom-start"
        @search="search"
        @change="change"
      >
        <template slot="search">
          <el-input
            v-model="formData.matName"
            clearable
            searchLabel="设备物资名称"
            placeholder="请输入内容"
          ></el-input>
          <el-input
            v-model="formData.matNum"
            clearable
            searchLabel="设备物资编号"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-search>
    </div>
    <div class="el-dialog__body-bodys">
      <div class="bodys-left">
        <el-tree
          v-if="dialogTrueOrFalse"
          ref="tree"
          node-key="categoryCode"
          expand-on-click-node
          show-checkbox
          lazy
          show-line
          :props="treeProps"
          :load="loadNode"
          :default-checked-keys="[1]"
          :check-strictly="true"
          :conditionCheckbox="true"
          :draggable="false"
          @check="handleCheckClick"
        >
        </el-tree>
      </div>
      <div class="bodys-right">
        <el-table
          ref="multipleTable"
          :data="tableData"
          maxHeight="390"
          :lineClamp="lineClampBody"
          style="width: 700px"
          @select="handleSelect"
          @select-all="handleSelectAll"
          :row-key="getRowKey"
        >
          <el-table-column
            type="selection"
            width="45"
            :reserve-selection="true"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            label="序号"
            width="45"
            type="index"
            align="center"
          />
          <el-table-column prop="matNum" label="设备物资编号" width="110" />
          <el-table-column prop="matName" label="设备物资名称" width="150" />
          <el-table-column prop="parentCategoriesCode" label="分类编码" />
          <el-table-column prop="parentCategoriesName" label="分类名称" />
          <el-table-column prop="unitStr" label="计量单位" width="80" />
        </el-table>
        <div class="table-footer" style="height: 30px" v-if="isTurnPage">
          <div class="ccui-table-footer">
            <div id="ccui-paging">
              <el-pagination
                :total="total"
                :pager-count="5"
                :page-size="formData.pageSize"
                :current-page="formData.pageNo"
                prev-text="< 上一页"
                next-text="下一页 >"
                background
                layout="total, prev, pager, next, jumper"
                popper-class="ccui-paging-page-size-popper"
                @prev-click="handlePrev"
                @next-click="handleNext"
                @size-change="handleSizeChange"
                @addCurrentPage="internalCurrentPage"
                @current-change="handleCurrentChange"
              />
              <el-button
                class="ccui-pagination-btn"
                size="mini"
                type="default"
                @click="handleGoPage"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="default-mini" @click="handleFalse"
        >取 消</el-button
      >
      <el-button size="mini" type="primary-font-mini" @click="handleTrue"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { qryMatSubCataTree, qryListMateriaCata } from "@/basa/api";
export default {
  name: "chooseMaterials",
  data() {
    return {
      dialogFormVisible: false,
      lineClampBody: true,
      id: 3,
      tableData: [],
      rightTableData: [], //选择的数据
      treeProps: {
        label: "categoryName",
        children: "childNodes",
        isLeaf: "leaf"
      },
      gridData: [],
      dialogTableVisibletextarea: false,
      formData: {
        matName: "",
        matNum: "",
        pageNo: 1,
        pageSize: 10,
        catalogId: ""
      },
      textarea: "",
      formLabelWidth: "120px",
      present: "",
      total: 1000,
      lastTime: {
        button: false
      },
      materialsData: [], //物资选择数据
      isTurnPage: false, //是否有翻页
      treeArray: [],
      dialogTrueOrFalse: true, //刷新插件
      currentCategoryCode: "" // 当前选中节点
    };
  },
  props: {
    chooseMaterialsBtn: {
      type: Number
    }
  },
  methods: {
    getRowKey(row) {
      return row.matCode;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    //树复选框
    handleCheckClick(checkedNodes) {
      // 多选
      // if (this.treeArray.indexOf(checkedNodes.categoryCode) == -1) {
      //   this.treeArray.push(checkedNodes.categoryCode);
      // } else {
      //   let index = this.treeArray.indexOf(checkedNodes.categoryCode);
      //   this.treeArray.splice(index, 1);
      // }
      // this.formData.catalogId = this.treeArray.join(',');

      // 单选
      if (
        this.currentCategoryCode &&
        this.currentCategoryCode !== checkedNodes.categoryCode
      ) {
        this.$refs.tree.setChecked(this.currentCategoryCode, false);
      }
      this.currentCategoryCode = checkedNodes.categoryCode;
      this.formData.catalogId = checkedNodes.categoryCode;
      this.$refs.multipleTable.clearSelection();

      this.qryListMateriaCata();
    },
    qryListMateriaCata() {
      qryListMateriaCata(this.formData).then(res => {
        if (res.data.code == 0) {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.recordsTotal;
          this.$nextTick(() => {
            if (this.tableData == []) {
              this.isTurnPage = false;
            } else {
              this.isTurnPage = true;
            }
          });
        }
      });
    },
    //列表复选框全选
    handleSelectAll(val) {
      let newEquipmentDate = []; //过滤重复商品后新的物资
      if (this.rightTableData.length > 0) {
        this.rightTableData = val;
        var newEquipmentList = new Array();
        for (var i = 0; i < this.rightTableData.length; i++) {
          newEquipmentList.push(this.rightTableData[i]);
        }
        for (var y = 0; y < val.length; y++) {
          var flag = true;
          for (var j = 0; j < this.rightTableData.length; j++) {
            if (val[y].matCode == this.rightTableData[j].matCode) {
              flag = false;
              break;
            }
          }
          if (flag) {
            newEquipmentDate.push(val[y]);
          }
        }
        for (var n = 0; n < newEquipmentDate.length; n++) {
          this.rightTableData.push(newEquipmentDate[n]);
        }
      } else {
        this.rightTableData = val;
        // for (var k = 0; k < val.length; k++) {
        //   this.rightTableData.push(val[k]);
        // }
      }
      // this.$emit("confirm", this.rightTableData);
    },
    //列表复选框单选
    handleSelect(val) {
      let newEquipmentDate = []; //过滤重复商品后新的物资
      if (this.rightTableData.length > 0) {
        this.rightTableData = val;
        var newEquipmentList = new Array();
        for (var i = 0; i < this.rightTableData.length; i++) {
          newEquipmentList.push(this.rightTableData[i]);
        }
        for (var y = 0; y < val.length; y++) {
          var flag = true;
          for (var j = 0; j < this.rightTableData.length; j++) {
            if (val[y].matCode == this.rightTableData[j].matCode) {
              flag = false;
              break;
            }
          }
          if (flag) {
            newEquipmentDate.push(val[y]);
          }
        }
        for (var n = 0; n < newEquipmentDate.length; n++) {
          this.rightTableData.push(newEquipmentDate[n]);
        }
      } else {
        this.rightTableData = val;
        // for (var k = 0; k < val.length; k++) {
        //   this.rightTableData.push(val[k]);
        // }
      }
      // this.$emit("confirm", this.rightTableData);
    },
    handleCurrentChange(val) {
      this.formData.pageNo = val;
      this.qryListMateriaCata();
    },
    internalCurrentPage(val) {
      this.formData.pageNo = val;
      this.qryListMateriaCata();
    },
    handlePrev(val) {},
    handleNext(val) {},
    handleGoPage() {},
    loadNode(node, resolve) {
      let data = {};
      if (node.level == 0) {
        data = {
          categoryCode: "0"
        };
      } else {
        data = {
          categoryCode: node.data.categoryCode
        };
      }
      qryMatSubCataTree(data).then(res => {
        if (res.data.code == 0) {
          if (node.level <= 2) {
            res.data.data.categoryList.forEach(item => {
              if (item.isLeaf == 1) {
                item.leaf = true;
              }
            });
            resolve(res.data.data.categoryList);
          } else {
            res.data.data.categoryList.forEach(item => {
              if (item.isLeaf == 1) {
                item.leaf = true;
              }
              item.treeCheckbox = true;
            });
            resolve(res.data.data.categoryList);
          }
        } else {
          resolve && resolve([]);
        }
      });
    },
    search(val) {
      this.qryListMateriaCata();
    },
    change(val) {
      if (val == 0) {
        this.formData.matName = "";
      } else {
        this.formData.matNum = "";
      }
    },
    handleTrue() {
      this.$emit("confirm", this.rightTableData);
      this.rightTableData = [];
      this.formData.catalogId = "";
      this.treeArray = [];
      this.dialogFormVisible = false;
    },
    handleFalse() {
      this.formData.catalogId = "";
      this.rightTableData = [];
      this.treeArray = [];
      this.dialogFormVisible = false;
    }
  },
  watch: {
    chooseMaterialsBtn() {
      if (this.chooseMaterialsBtn > 1) {
        this.dialogTrueOrFalse = false;
        this.formData.matName = "";
        this.formData.matNum = "";
        this.formData.pageNo = 1;
        this.formData.pageSize = 10;
        this.formData.catalogId = "";
        // this.currentCategoryCode = "";
        this.tableData = [];
        this.total = 0;
        this.isTurnPage = false;
        this.$nextTick(() => {
          this.dialogTrueOrFalse = true;
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/
  .sorting-code-number
  .el-dialog__body
  .el-dialog__body-header
  .el-search
  .ccui-search-wrapper
  .el-dropdown-link {
  cursor: pointer;
}
/deep/.sorting-code-number
  .el-dialog__body
  .el-dialog__body-header
  .el-search
  .ccui-search-wrapper
  .el-dropdown-link
  .duidui {
  font-size: 13px !important;
  padding-left: 5px !important;
}
</style>
